<template>
  <transition>
    <div class="singer" ref="singer">
      <singer-category :category-list="categoryList" @category-click="fetchSingerlist" />
      <scroll :list="singerList" class="singer-scroll" ref="scroll">
        <div>
          <singer-list :singerList="singerList" />
        </div>
      </scroll>
      <Loading v-show="!singerList.length" class=' loading-container' />
    </div>
  </transition>
</template>

<script>
import SingerCategory from '../../components/singer/SingerCategory'
import SingerList from '../../components/singer/SingerList'
import Loading from '../../components/base/Load'
import Scroll from '../../components/base/Scroll'
import { playListMixin } from 'common/js/mixin'

export default {
  name: 'singer',
  mixins: [playListMixin], // 组件同名方法可以覆盖mixin方法
  components: {
    SingerCategory,
    SingerList,
    Loading,
    Scroll
  },

  data() {
    return {
      categoryList: {}, // 歌手分类
      singerList: [] // 获取歌手列表
    }
  },
  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.singer.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    // 获取歌手分类
    async fetchCategory() {
      const {
        data: { data: res }
      } = await this.$http.get('/api/singer/category')
      this.categoryList = {
        sex: res.sex,
        area: res.area,
        genre: res.genre
      }
    },
    /* 获取歌手列表*/
    async fetchSingerlist(params) {
      /* 利用params将点击的属性传给接口*/
      this.singerList = []
      const res = await this.$http.get('/api/singer/list', { params })
      this.singerList = res.data.data.list
    }
  },
  created() {
    this.fetchCategory()
    this.fetchSingerlist()
  }
}
</script>

<style scoped lang="stylus">
.singer {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;

  .singer-scroll {
    position: absolute;
    top: 114px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .loading-container {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
